<template>
  <div class="requestPresentDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">赠送请求审批详情</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">状态：<b :class="[stateTextClass]" v-text="stateText"></b></span>
      </div>
    </card>
    <group title="本次赠送商品列表：">
      <x-table :cell-bordered="false">
        <thead>
        <tr style="background-color: #F7F7F7">
          <th width="45%">赠送商品</th>
          <th width="22%">赠送数量</th>
          <th width="33%">赠送金额</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in requestPresentInfo.DETAILS" :key="index">
          <td v-text="item.NAME"></td>
          <td v-text="item.QUANTITY"></td>
          <td v-text="'¥ ' + formatCurrency(item.ORIGINAL_PRICE) + '元'"></td>
        </tr>
        <tr v-if="JSON.stringify(requestPresentInfo) != '{}' && requestPresentInfo.DETAILS.length <= 0">
          <td colspan="3">
            <div class="listNoItem">暂无赠送明细</div>
          </td>
        </tr>
        </tbody>
      </x-table>
    </group>
    <group label-width="6em">
      <cell title="发起请求人" v-if="requestPresentInfo.PRESENTER != null && requestPresentInfo.PRESENTER != undefined" :value="requestPresentInfo.PRESENTER + ' - ' + requestPresentInfo.present_DEPARTMENT"></cell>
      <cell title="发起请求时间" :value="requestPresentInfo.REQUEST_DATETIME"></cell>
      <cell title="赠送类型" :value="getType(requestPresentInfo.TYPE)"></cell>
      <cell title="赠送备注" :value="requestPresentInfo.REMARK"></cell>
      <cell title="审批人" v-if="requestPresentInfo.STATE == 0" :value="'未审批'"></cell>
      <cell title="审批人" v-else-if="requestPresentInfo.AUDITOR != null && requestPresentInfo.AUDITOR != undefined" :value="requestPresentInfo.AUDITOR + ' - ' + requestPresentInfo.auditor_DEPARTMENT"></cell>
    </group>
    <group title="赠送关联订单详情：" label-width="6em">
      <cell title="订单单号" inline-desc="点击查看已赠送详情" class="number" :value="requestPresentInfo.ORDER_NUMBER" :is-link="showLink" :link="orderLink"></cell>
      <cell title="赠送房台号" :value="requestPresentInfo.AREA + ' - ' + requestPresentInfo.NUMBER + '（' + requestPresentInfo.ROOM_PLATFORM_TYPE + '）'"></cell>
      <!--<cell title="赠送房台号" :inline-desc="'(当台已付：'+ formatCurrency(requestPresentInfo.payed) +'元)'" :value="requestPresentInfo.AREA + ' - ' + requestPresentInfo.NUMBER + '（' + requestPresentInfo.ROOM_PLATFORM_TYPE + '）'"></cell>
      --><cell title="客户名称" :value="requestPresentInfo.CUSTOMER_NAME"></cell>
    </group>
    <box gap="1rem 0.8rem">
      <div class="btnArea">
        <x-button v-if="requestPresentInfo.STATE == 1 || requestPresentInfo.STATE == 2" :disabled="false" text="已审批"></x-button>
        <div class="btnAreaWrap" v-if="requestPresentInfo.STATE == 0">
          <x-button @click.native="submit(true)" type="primary" :show-loading="loadingStatus" :disabled="loadingStatus" text="同意赠送" class="inlineBtn"></x-button>
        </div>
        <div class="btnAreaWrap" v-if="requestPresentInfo.STATE == 0">
          <x-button @click.native="submit(false)" type="warn" :show-loading="loadingStatus" :disabled="loadingStatus" text="不同意赠送" class="inlineBtn"></x-button>
        </div>
      </div>
    </box>
    <br/>
  </div>
</template>

<script>
  import {Group, Cell, Card, XTable, Box, XButton, numberComma } from 'vux'
  import {getPresentDetail, submitAuditPresent} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'requestPresentDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramPresentId:this.$route.params.presentId,
        requestPresentInfo:{},
        stateText:'',
        stateClass:'',
        stateTextClass:'',
        showLink:false,
        orderLink:''
      }
    },
    components:{
      Group,
      Cell,
      Card,
      XTable,
      Box,
      XButton
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthorityNotice
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      getState(state){
        switch (state) {
          case 0:this.stateText = '待赠送';this.stateClass = 'icon-zengsong1';this.stateTextClass = 'waiting';break
          case 1:this.stateText = '同意赠送';this.stateClass = 'icon-chenggong1';this.stateTextClass = 'agree';break
          case 2:this.stateText = '不同意赠送';this.stateClass = 'icon-shibai  ';this.stateTextClass = 'disagree';break
          default:this.stateText = '无状态';this.stateClass = '';this.stateTextClass = '';break
        }
      },
      getType(type){
        switch (type) {
          case 0:return '销售库存赠送';break
          case 1:return '存酒库存赠送';break
          case 2:return '过期酒水签送';break
          case 4:return '会员卡办卡/充值赠送';break
          default:return '无赠送类型';break
        }
      },
      submit(agreeOrNot){
        this.loadingStatus = true
        let agreeText = agreeOrNot?'同意':'不同意'
        this.$vux.confirm.show({
          title:'是否确认操作',
          content:'【' + agreeText + '】审批操作？',
          onCancel: ()=> {
            this.loadingStatus = false
          },
          onConfirm: ()=> {
            let reqParams = {
              presentId:this.paramPresentId,
              agreeOrNot:agreeOrNot
            }
            submitAuditPresent(reqParams).then((res)=>{
              if(res.status == 'success'){
                message({message:'您已同意审批',type:'info'})
                this.$router.push({path:'/requestPresentList'})
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('submitAuditPresent error info:', res.msg)
              }
              this.loadingStatus = false
            }).catch((err)=>{console.log('submitAuditPresent catch info:',err)})
          }
        })
      }
    },
    mounted(){
      if(this.authority.present == 'present_audit' || this.authority.present == 'present_audit_all'){
        getPresentDetail(this.paramPresentId).then((res)=>{
          if(res.status == 'success'){
            this.requestPresentInfo = res.data
            console.log(this.requestPresentInfo)
            this.getState(res.data.STATE)
            this.showLink = true
            this.orderLink = {name:'订单详情',params:{orderId:this.requestPresentInfo.ORDER_ID}}
            this.loadingStatus = false
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getPresentDetail error info:', res.msg)
          }
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }).catch((err)=>{console.log('getPresentDetail catch info:',err)})
      }else{
        message({message:'没有权限查看该页面',type:'error'})
        this.$router.push({path:'/noticeIndex'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .requestPresentDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.waiting{color: #ffca10;}
        &.agree{color: #0abd39;}
        &.disagree{color: #ff2623;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.waiting{color: #ffca10;}
          &.agree{color: #0abd39;}
          &.disagree{color: #ff2623;}
        }
      }
    }
    .btnArea{
      display:flex;margin: 1rem 0;text-align: center;
      .btnAreaWrap{width:50%;}
      button{width:90%;margin: 0 5%;height: 2.6rem;font-size: 1.2rem;}
    }
  }
</style>
